<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/title/title.css">
<style type="text/css">
</style>
<script type="text/javascript">
$(function() {
    $(".form input").each(function(){
        $(this).setDefauleValue();
    });
    $("#searchId").setDefauleValue();

})
 
$.fn.setDefauleValue = function() {
    var defauleValue = $(this).val();
    $(this).val(defauleValue).css("color","#999");
 
    return this.each(function() {       
        $(this).focus(function() {
            if ($(this).val() == defauleValue) {
                $(this).val("").css("color","#000");//输入值的颜色
            }
        }).blur(function() {
            if ($(this).val() == "") {
                $(this).val(defauleValue).css("color","#999");//默认值的颜色
            }
        });
    });
}
$(function() {
    $(document).tooltip();
});
var setCount = true;
function setInput(){//设置搜索框的样式
	if(setCount){
		$("#searchkey").css('background-color','#FFFFFF');
		$("#searchkey").css('color','#000000');
		setCount = false;
	}else{
		setCount = true;
		$("#searchkey").css('background-color','#70706D');
		$("#searchkey").css('color','#FFFFFF');
	}
}
$(function() {
	$("#searchkey").keypress(function(e) {
		if (e.which == 13){ // 判断所按是否回车键
			var inputs = $("#searchkey").val();
			alert(inputs);//这里连接后台搜索
		}
	});
});
$(document).ready(function(){
	jQuery.focusblurmenu = function(focusdom,focuswidthnew,animatetime) {
		var focusblurmenuid = $(focusdom);
		var defval = focusblurmenuid.val();
		var defwidth = focusblurmenuid.width();
		focusblurmenuid.focus(function(){
			var thisval = $(this).val();
			if(thisval == '搜索'){
				$(this).val("");
			}
			$(this).animate({width:"+"+focuswidthnew}, focuswidthnew).addClass("searchkeyfocus");
		});
		focusblurmenuid.blur(function(){
			var thisval = $(this).val();
			if(thisval==""){
				$(this).val(defval);
			}
			$(this).animate({width:"+"+defwidth}, focuswidthnew).removeClass("searchkeyfocus");
		});
	};
	$.focusblurmenu("#searchkey","100px","0");
});
</script>
</head>
<body>
	<div id="titleDiv" align="center"><!-- 最外一层，黑色背景，宽度占满全屏 -->
		<div id="centerDiv"><!-- 宽度1000px的一层 -->
			<div style="padding: 5px;float:left;"><!-- 选择div -->
				<select id="selectId">
					<option>个人中心</option>
					<option>消息</option>
					<option>账号设置</option>
					<option>我的课程</option>
					<option>社交</option>
					<option>我的课程</option>
					<option>创建课程</option>
					<option>退出</option>
				</select>
			</div>
			<div style="width:10px;height:30px;float: left;"></div>
			<div style="padding: 7px;float: left;">
				<img alt="" style="width: 15px;height: 10px;cursor: pointer;" src="<%=path%>/images/title/msg_img.png">
				<font style="font-size: 11px;color: #FFFFFF">78</font>
			</div>
			<div style="width:10px;height:30px;float: left;"></div>
			<div style="height:30px;float: left;padding: 5px;">
				<a href="#" style="cursor: pointer;color:#FFFFFF;font-size: 13px;">我的课程</a>
				&nbsp;&nbsp;&nbsp;
				<a href="#" style="cursor: pointer;color:#FFFFFF;font-size: 13px;">查找课程</a>
			</div>
			<div style="height: 105px;float: right;">
				<input title="按回车键进行搜索"  id="searchkey" onblur="setInput();" onfocus="setInput();" value="搜索" type="text" style="padding: 3px;margin-right: 5px;margin-top: 6px;font-size: 11px;height: 12px;width: 60px;background-color: #70706D;border: 0px;color: #FFFFFF;"/>
			</div>
		</div>
		
	</div>
	
</body>
</html>